<template>
  <div id="home">
    <!--top-header-->
    <top-header></top-header>
    <!--logo and search-->
    <div style="clear: left" class="logoAndSearch">
      <logo-search @on-submit="onsubmit"></logo-search>
    </div>
    <!--nav-->
    <h-nav :activeIndex="activeIndex"></h-nav>
    <!--banner-->
    <div class="bannerBox">
      <div class="slider">
        <ul id="banner_list" class="banner">
          <li
            :style="{background:`url(${this.banner[bannerIndex].img}) no-repeat center center`,zIndex:1, opacity:1}">
            <a @mouseenter.stop="bannerEnter" @mouseleave.stop="bannerLeave" class="banner_pic" href="###"></a>
          </li>
        </ul>
      </div>
      <div class="maxWidth banner_layer">
        <div v-show="false" class="sign_in">
          <div class="nosign_box">
            <a class="sign_btn" href="javascript:void(0);" onclick="signIn();">
              <i class="sign_date">28</i><span class="sign_txt">每日签到领积分</span>
            </a>
            <p class="start_sign"><span class="sign_inner">
            在手机签到多5积分<font>&gt;&gt;</font>
            <span class="qrcode_box"></span></span></p></div>
          <div class="oksign_box" style="display:none">
            <div class="sign_success"><i class="sign_date">28</i>
              <span class="sign_txt">签到成功,<a class="daren_sign" href="javascript:;">达人榜</a></span></div>
            <p class="start_sign">您已连续签到0天</p>
            <div class="sign_rank"><i class="rank_angle"></i>
              <p class="rank_tit">签到达人榜（连续）</p>
              <table class="rank_table">
                <tbody>
                <tr>
                  <td><span class="sign_day">1</span></td>
                  <td class="col_td"><img class="col_img"
                                          src=" https://qzapp.qlogo.cn/qzapp/100406685/232939C8467C777A8E697AD4C6F5208D/100"
                                          alt=""><span class="col_name" title="疯中勿语">疯中勿语</span></td>
                  <td>1562天</td>
                </tr>
                <tr>
                  <td><span class="sign_day">2</span></td>
                  <td class="col_td"><img class="col_img"
                                          src=" https://qzapp.qlogo.cn/qzapp/100406685/6AC8B43727514B0C07ABF4EE9BE3C627/100"
                                          alt=""><span class="col_name" title="水分子">水分子</span></td>
                  <td>1488天</td>
                </tr>
                <tr>
                  <td><span class="sign_day">3</span></td>
                  <td class="col_td"><img class="col_img"
                                          src=" https://qzapp.qlogo.cn/qzapp/100406685/1189A47AF79B30608A2D8552A632E6E2/100"
                                          alt=""><span class="col_name" title="Gary">Gary</span></td>
                  <td>1407天</td>
                </tr>
                <tr>
                  <td><span class="sign_day">4</span></td>
                  <td class="col_td"><img class="col_img"
                                          src=" https://qzapp.qlogo.cn/qzapp/100406685/8A45EBC7DD538B3A1EE6F9A8D5A94A8A/100"
                                          alt=""><span class="col_name" title="為海沉淪">為海沉淪</span></td>
                  <td>1266天</td>
                </tr>
                <tr>
                  <td><span class="sign_day">5</span></td>
                  <td class="col_td"><img class="col_img" src=" https://i.huim.com/users/13811367035579.jpg"
                                          alt=""><span class="col_name" title="梦想家黄思聪">梦想家黄思聪</span></td>
                  <td>1252天</td>
                </tr>
                <tr>
                  <td><span class="sign_day">6</span></td>
                  <td class="col_td"><img class="col_img"
                                          src=" https://qzapp.qlogo.cn/qzapp/100406685/96128F21F57D75BE72ABC2EAEB5FC6A5/100"
                                          alt=""><span class="col_name" title="Buble">Buble</span></td>
                  <td>1249天</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="sign_foot"><a target="_blank" class="publish_btn" href="/publish/add">爆料有奖</a><a target="_blank"
                                                                                                       href="/award/">0元抽奖</a>
          </div>

        </div>
        <div class="adtype">
          <a href="javascript:void(0)" @click="circleClick(index)" :class="{'current':bannerIndex==index}"
             v-for="(item,index) in banner"></a>
        </div>
        <div v-show="bannerArrowShow" class="banner_arrow">
          <a @click="arrowPrevClick" @mouseenter="bannerEnter" @mouseleave="bannerLeave" href="javascript:;"
             class="arrow_prev" data-arrow="prev"><i></i></a>
          <a @click="arrowNextClick" @mouseenter="bannerEnter" @mouseleave="bannerLeave" href="javascript:;"
             class="arrow_next" data-arrow="next"><i></i></a>
        </div>

      </div>
    </div>
    <div class="bgWhite">
      <div class="home_tip maxWidth flex-row">
        <div class="home_tip_item flex-grow-1 flex-row flex-y-center" v-for="(item,index) in tuijianList">
          <div class="icon flex-grow-0"><img v-src="item.iconUrl"></div>
          <div class="text flex-grow-1">{{item.text}}</div>
          <i v-show="index!==2" class="home_tip_line flex-grow-1"></i>
        </div>
      </div>
    </div>

    <!--排行榜-->
    <div class="ranking_area_wrap">
      <div class="ranking_area maxWidth">
        <div class="ranking clearfix">
          <h4 class="fl">排行榜</h4>
          <div class="ranking_select_box fl">
            <a class="" href="javascript:void(0);" :class="{'actived':dataTypeIndex==1}" @click="dataTypeClick1"
               ref="dataType1" :title="1">择券</a>
            <a class="select_tj" :class="{'actived':dataTypeIndex==2}" href="javascript:void(0);" ref="dataType2"
               @click="dataTypeClick2"
               :title="2">活动推广</a>
          </div>
          <div class="ranking_line"></div>
          <div class="search_area fr">
            <div class="search_box clearfix">
              <form @submit.prevent="smallSubmit">
                    <span class="search_input fl">
                        <input v-model="smallserchValue" type="text" id="keywords" class="keywords txt_focus" name="s"
                               placeholder="请输入想找的宝贝"
                               lang="请输入想找的宝贝" autocomplete="off">
                    </span>
                <input type="submit" class="search_submit fl" value="">
                <i class="search_icon"></i>
              </form>
            </div>
          </div>
        </div>
        <a href="javascript:void(0);" @click="swiperPrevClick" class="arrow_btn arrow_prev"><i></i></a>
        <a href="javascript:void(0);" @click="swiperNextClick" class="arrow_btn arrow_next"><i></i></a>
        <div class="r_content ">
          <swiper loop v-model="swiperIndex" height="248px" dots-position="center" :duration="1000" :interval=5000
                  :show-dots="false">
            <!--1-->
            <swiper-item v-show="paihangbangData.length>=2">
              <ul class="flex-list">
                <li @click="paihangbangClick(item.id,item.goodId)" v-show="index<5" v-for="(item,index) in paihangbangData">
                  <i class="tiem_no">{{index+1}}</i>
                  <a v-show="dataTypeIndex==1" href="javascript:void(0)">
                    <img v-src="item.mainPic">
                    <p class="g_title">{{item.name}}</p>
                    <div class="box_info clearfix">
                      <div class="fl g_price">￥
                        <span class="ranking_price">{{item.priceAfterCoupon | getCount}}</span>
                        <i class="quan_icons"></i></div>
                      <span class="fr g_num">有{{item.couponUse}}人领券</span>
                    </div>
                  </a>
                  <a  v-show="dataTypeIndex==2" href="javascript:void(0)">
                    <img v-src="item.recommendPagePic">
                    <p class="g_title">{{item.title}}</p>
                    <div v-show="dataTypeIndex==2" class="g_price ">{{item.subtitle}}</div>
                  </a>
                </li>
              </ul>
            </swiper-item>
            <!--2-->
            <swiper-item v-show="paihangbangData.length>7">
              <ul class="flex-list">
                <li @click="paihangbangClick(item.id,item.goodId)" v-show="index>=5&&index<10" v-for="(item,index) in paihangbangData">
                  <i class="tiem_no">{{index+1}}</i>
                  <a v-show="dataTypeIndex==1" href="javascript:void(0)">
                    <img v-src="item.mainPic">
                    <p class="g_title">{{item.name}}</p>
                    <div class="box_info clearfix">
                      <div class="fl g_price">￥
                        <span class="ranking_price">{{item.priceAfterCoupon | getCount}}</span>
                        <i class="quan_icons"></i></div>
                      <span class="fr g_num">有{{item.couponUse}}人领券</span>
                    </div>
                  </a>
                  <a  v-show="dataTypeIndex==2" href="javascript:void(0)">
                    <img v-src="item.recommendPagePic">
                    <p class="g_title">{{item.title}}</p>
                    <div v-show="dataTypeIndex==2" class="g_price ">{{item.subtitle}}</div>
                  </a>
                </li>
              </ul>
            </swiper-item>
            <!--3-->
            <swiper-item v-show="paihangbangData.length>12">
              <ul class="flex-list">
                <li @click="paihangbangClick(item.id,item.goodId)" v-show="index>=10&& index <15" v-for="(item,index) in paihangbangData">
                  <i class="tiem_no">{{index+1}}</i>
                  <a v-show="dataTypeIndex==1" href="javascript:void(0)">
                    <img v-src="item.mainPic">
                    <p class="g_title">{{item.name}}</p>
                    <div class="box_info clearfix">
                      <div class="fl g_price">￥
                        <span class="ranking_price">{{item.priceAfterCoupon | getCount}}</span>
                        <i class="quan_icons"></i></div>
                      <span class="fr g_num">有{{item.couponUse}}人领券</span>
                    </div>
                  </a>
                  <a  v-show="dataTypeIndex==2" href="javascript:void(0)">
                    <img v-src="item.recommendPagePic">
                    <p class="g_title">{{item.title}}</p>
                    <div v-show="dataTypeIndex==2" class="g_price ">{{item.subtitle}}</div>
                  </a>
                </li>
              </ul>
            </swiper-item>
            <!--4-->
            <swiper-item v-show="paihangbangData.length>17">
              <ul class="flex-list">
                <li @click="paihangbangClick(item.id,item.goodId)" v-show="index>=15&& index <20" v-for="(item,index) in paihangbangData">
                  <i class="tiem_no">{{index+1}}</i>
                  <a v-show="dataTypeIndex==1" href="javascript:void(0)">
                    <img v-src="item.mainPic">
                    <p class="g_title">{{item.name}}</p>
                    <div class="box_info clearfix">
                      <div class="fl g_price">￥
                        <span class="ranking_price">{{item.priceAfterCoupon | getCount}}</span>
                        <i class="quan_icons"></i></div>
                      <span class="fr g_num">有{{item.couponUse}}人领券</span>
                    </div>
                  </a>
                  <a  v-show="dataTypeIndex==2" href="javascript:void(0)">
                    <img v-src="item.recommendPagePic">
                    <p class="g_title">{{item.title}}</p>
                    <div v-show="dataTypeIndex==2" class="g_price ">{{item.subtitle}}</div>
                  </a>
                </li>
              </ul>
            </swiper-item>
          </swiper>
        </div>
      </div>
    </div>


    <!--优惠券列表-->
    <div class="container maxWidth">
      <div class="youhuquan_area">
        <div class="miaoquan_title clearfix" id="type">
          <h4 class="fl">超值精选<span class="mq_tip"></span></h4>
          <div v-show="false" class="tit_update fr">今日上新<span class="update_num">302</span>条</div>
        </div>
        <div class="youhuquan_menubox" ref="youhuquanMenu" :class="{'youhuquan_menu_fixed':showFixed}">
          <div class=" youhuquan_menu maxWidth clearfix">
            <ul class="fl">
              <!--:class="{'current':menuCurrentIndex==index && !showFixed}"-->
              <li v-show="index<10" class="fl" @click="containerMenuClick(index)"
                  v-for="(item,index) in containerMenu">
                <a :class="{'currentA':menuCurrentIndex==index}" href="javascript:void (0)">{{item.name}}</a>
              </li>
            </ul>
            <div class="current" ref="current"></div>
            <div v-show="false" class="displayNone">
              <span v-show="false" class="fl one_line"></span>
              <a v-show="false" href="javascript:void (0)" class="fl">
                <span class="icon"></span>
                <span class="text">9块9封顶</span>
              </a>
            </div>
          </div>
        </div>
        <div class="youhuquan_list_box flex-list">
          <list-item :key="index" :item="item" v-for="(item,index) in couponListData"></list-item>
        </div>
      </div>
    </div>
    <!--footer-->
    <v-footer></v-footer>

    <!--回到顶部-->
    <go-top :isShowGoTop="isShowGoTop"></go-top>
  </div>
</template>
<script>
  import TopHeader from 'src/components/common/topHeader.vue'
  import HNav from 'src/components/common/nav.vue'
  import LogoSearch from 'src/components/common/logoSearch.vue'
  import VFooter from 'src/components/common/footer.vue'
  import ListItem from 'src/components/common/ListItem.vue'
  import GoTop from 'src/components/common/goTop.vue'
  import {Swiper, SwiperItem} from 'vux'
  import {URI_GETTYPE, RUI_GETTYPECOUPON, RUI_GETACTIVITIESLIST,URI_BANNNER,URI_SHZRANKS,GETCHANGELINK} from 'src/const/uri'

  let timer;//全局来一个控制定时器的变量
  export default {
    components: {HNav, TopHeader, LogoSearch, VFooter, ListItem, GoTop, Swiper, SwiperItem},
    data() {
      return {
        activeIndex: 0,
        bannerIndex: 0,
        bannerArrowShow: false,
        swiperIndex: 0,//排行榜哪里的；
        dataTypeIndex: 1,
        containerMenu: [],
        tuijianList: [
          {'iconUrl': '/static/img/home/home-icon1.png', text: '择天惠精选推荐'},
          {'iconUrl': '/static/img/home/home-icon2.png', text: '领券超低价'},
          {'iconUrl': '/static/img/home/home-icon3.png', text: '全天500款上新'}
        ],
        banner: [
          {img:""}
        ],
        paihangbangData: [],
        menuCurrentIndex: 0,
        showFixed: false,
        isShowGoTop: false,

        reqPage: 1,
        reqPageSize: 40,
        couponListData: [],

        sw: true,

        smallserchValue: '',
      }
    },
    created() {
      this.initTypeData();
      this.initListData();
      this.getpaihangbang();
      this.getBanner();
    },
    mounted() {
      //console.log(document.getElementsByClassName('youhuquan_menubox')[0].offsetTop);
      let menuOffsetTop = this.$refs.youhuquanMenu.offsetTop;
      let Home = document.getElementById('home')
      // console.log(menuOffsetTop);
      // console.log(menuOffsetTop);
      window.addEventListener('scroll', () => {
        // console.log(this.$refs.youhuquan_menu.offsetTop);
        // console.log(document.documentElement.scrollTop)

        if (document.documentElement.scrollTop + document.documentElement.clientHeight >= Home.offsetHeight - 400) {
          if (this.sw == true) {
            this.reqPage += 1;
            this.sw = false;
            this.initListData();
          }
        }

        if (document.documentElement.scrollTop >= menuOffsetTop + 253) {
          this.showFixed = true;
        } else {
          this.showFixed = false;
        }
        if (document.documentElement.scrollTop >= (menuOffsetTop + 120)) {
          this.isShowGoTop = true;
        } else {
          this.isShowGoTop = false;
        }
      })
      this.funSetInterval();
    },
    methods: {
      /*GET BANNER*/
      getBanner(){
        this.$ajax.get(URI_BANNNER, {}, (res) => {
            console.log('banner');
            console.log(res);
          this.banner=res.data.banner;
          }
        );
      },
      /*get 分类*/
      initTypeData() {
        this.$ajax.get(URI_GETTYPE, {}, (res) => {
          //  console.log('分类');
          //  console.log(res);
          this.containerMenu = res.data;
        });
      },
      //排行榜择券
      getpaihangbang() {
        this.$ajax.get(URI_SHZRANKS, {
          rank:'real',
          promotionTypeId:1
        }, (res) => {
          // console.log('paihanb');
          // console.log(res);
          this.paihangbangData = res.data.data;
          console.log('paihangbang');
          console.log(this.paihangbangData);
        });
      },
      gettuiguanhuodong() {
        this.$ajax.get(RUI_GETACTIVITIESLIST, {
          reqPage: 1,
          reqPageSize: 20
        }, (res) => {
          this.paihangbangData = res.data.data;
          console.log(this.paihangbangData);
        });
      },
      initListData() {
        this.$ajax.get(RUI_GETTYPECOUPON, {
          reqPage: this.reqPage,
          reqPageSize: this.reqPageSize,
          goodCatId: this.menuCurrentIndex,
          promotionTypeId: 1,
        }, (res) => {
          this.couponListData = this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 40) {
            console.log('没有跟多数据');
            //说明没数据了
            this.sw = false;
          }
        });
      },
      /*定义一个定时器*/
      funSetInterval() {
        timer = setInterval(() => {
          this.bannerIndex++;
          if (this.bannerIndex > this.banner.length - 1) {
            this.bannerIndex = 0;
          }
        }, 2000)
      },
      containerMenuClick(index) {
        this.menuCurrentIndex = index;
        this.$refs.current.style.transition = 'all 300ms';
        this.$refs.current.style.transform = `translateX(${(76 * index)}px) scale(1) translateZ(0px)`;
        this.couponListData = [];
        this.initListData();
      },
      /*排行榜区域*/
      dataTypeClick1() {
        this.dataTypeIndex = this.$refs.dataType1.title;
        this.swiperIndex = 0;
        this.getpaihangbang();
      },
      dataTypeClick2() {
        this.dataTypeIndex = this.$refs.dataType2.title;
        this.swiperIndex = 0;
        this.gettuiguanhuodong();
      },
      paihangbangClick(id,goodId){
        if(this.dataTypeIndex==1){
            this.$ajax.get(GETCHANGELINK,{
                goodId: goodId,
                promotionTypeId: 1
            },(res)=>{
                window.open(res.data.tbkCouponLink);
            });
          //window.open(tbkLink);
        }else if(this.dataTypeIndex==2){
          let beforeUrl = document.URL.replace(/index/g, "detail").split('?')[0];
          let toUrl = `${beforeUrl}?id=${id}`;
          window.open(toUrl);
        }
      },
      /*操作banner*/
      arrowPrevClick() {
        this.bannerIndex--;
        if (this.bannerIndex < 0) {
          this.bannerIndex = this.banner.length - 1;
        }
      },
      arrowNextClick() {
        this.bannerIndex++;
        if (this.bannerIndex > this.banner.length - 1) {
          this.bannerIndex = 0;
        }
      },
      //鼠标经过
      bannerEnter() {
        this.bannerArrowShow = true;
        clearInterval(timer)
      },
      //鼠标离开
      bannerLeave() {
        this.bannerArrowShow = false;
        this.funSetInterval()
      },
      circleClick(index){
        this.bannerIndex=index;
      },
      /*bannner  End*/

      /*排行榜swiper*/
      swiperNextClick() {
        this.swiperIndex++;
      },
      swiperPrevClick() {
        this.swiperIndex--;
//        if(this.swiperIndex==0){
//          this.swiperIndex=2;
//        }
      },

      /*search 提交*/
      onsubmit(val) {
        window.location.href = `${cdnBase}/html/souhuiquan.html?key=${val}`
      },
      smallSubmit() {
        if (this.smallserchValue) {
          window.location.href = `${cdnBase}/html/souhuiquan.html?key=${this.smallserchValue}`
        }

      }
    }

  }
</script>
<style lang="less" scoped>
  @import "index";
</style>
<style>
</style>
